<template>
  <div id="printRef">
    <DrawerHeader title="批量拣货单" hiddenClose id="drawer-header"/>
    <p style="font-size: 20px;color: #303133;text-align: center;font-weight: bold" :class="styles['title']">批量拣货单</p>
    <div style="padding: 16px;display: flex; line-height: 6px" :class="styles['info']">
      <div style="margin-right: 32px">
        <p style="font-size: 18px;color: #303133;">拣货单UID：{{ info.pickOrderId }}</p>
        <p style="font-size: 18px;color: #303133;">拣货人：{{ info.picker }}</p>
      </div>
      <div>
        <p style="font-size: 18px;color: #303133;">拣货订单数：{{ info.outNoCount }}</p>
        <p style="font-size: 18px;color: #303133;">拣货时间：{{ info.pickTime }}</p>
      </div>
    </div>
    <PrintTable
        :columns="tableColumns"
        :rows="rows"
    />
    <div :class="styles['btns']" id="btns">
      <el-button type="primary" @click="confirm" size="large" style="width: 240px">确认拣货出仓,打印出库单</el-button>
      <el-button type="primary" @click="emit('close')" size="large" style="width: 200px">返回</el-button>
    </div>
  </div>
</template>

<script setup name="PickingListDetail">
import { ElMessageBox } from 'element-plus'
import { PrintTable, DrawerHeader } from '@/components'
import printJS from 'print-js'

const emit = defineEmits(['close'])

const props = defineProps({
  rows: Array,
  info: Object
})

const tableColumns = [
  {
    label: '卖家',
    prop: 'userNickname'
  },
  {
    label: '私人仓货架ID',
    prop: 'userWmsId'
  },
  {
    label: '合集ID',
    prop: 'cardsId'
  },
  {
    label: '销售订单UID',
    prop: 'orderOutNo'
  },
  {
    label: '订单类型',
    prop: 'orderType'
  },
  {
    label: '卡牌UID',
    prop: 'cardId'
  },
  {
    label: '卡牌名称',
    prop: 'cardName'
  },
  {
    label: '类型',
    prop: 'rating'
  },
  {
    label: '售卖模式',
    prop: 'sendType'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  },
  {
    label: '订单状态',
    prop: 'cardStatus'
  }
]

// 确认拣货出仓,打印出库单
const confirm = () => {
  ElMessageBox.alert('拣完货,请到【待确认拣货出仓订单列表】确认订单卡牌是否已拣货出仓,订单才可进入待发货流程', '温馨提示', {
    confirmButtonText: '我知道了',
    center: true,
    type: 'warning',
    callback: () => {
      onPrint()
    }})
}

function onPrint () {
  printJS({
    printable: 'printRef',
    type: 'html',
    css: '',
    style: `
            @page{ margin:0.5cm; line-height: 20px; }
            thead th {
              border: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            table {
              border-collapse: collapse;
            }
    `,
    scanStyles: false,
    targetStyles: ['*'],
    ignoreElements: ['btns', 'drawer-header']
  })
}

</script>

<style lang="less" src="./index.less" module="styles">

</style>
